<template>
  <div class="result-container">
    <div class="title-wrap">
      <span class="keywords" keywords="真相是真">{{$route.query.q}}</span>
      <span class="found">找到{{total}}个结果</span>
    </div>

    <div class="tabs-wrap">
      <el-tabs v-model="activeIndex">
        <!-- 歌曲 -->
        <el-tab-pane label="歌曲" name="songs">
          <el-table stripe style="width: 98%" :data="songs">
            <el-table-column type="index" width="60"></el-table-column>
            <el-table-column prop="name" label="音乐标题">
              <template slot-scope="scope">
                <div class="song-table-name-cell title-td">
                  <span class="song-table-name">{{ scope.row.name }}</span>
                  <!-- <Icon v-if="scope.row.mvId != 0" class="mv-icon" type="mv" :mvId="scope.row.mvId" color="theme" :size="18" /> -->
                </div>
                <!-- 二级标题 -->
                <span
                  v-if="scope.row.alias.length !== 0"
                  class="title-desc"
                >{{ scope.row.alias[0] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="artists[0].name" label="歌手"></el-table-column>
            <el-table-column prop="album.name" label="专辑"></el-table-column>
            <!-- <el-table-column label="时长" width="100">
              <template slot-scope="scope">
                <span>{{ $utils.formatTime(scope.row.duration) }}</span>
              </template>
            </el-table-column>-->
            <el-table-column label="时长" width="100" prop="duration" :formatter="formatter"></el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="歌单" name="lists">
          <div class="playlist-cards">
            <PlaylistCard
              :desc="'播放量：'+$utils.formatNumber(item.playCount)"
              :id="item.id"
              :img="item.coverImgUrl"
              :name="item.name"
              v-for="(item, index) in playlists"
              :key="index"
              @handelMusicItem="goToMusicDetail"
            />
          </div>
        </el-tab-pane>

        <el-tab-pane label="MV" name="mv">
          <div class="mvs">
            <ul class="mvs-list-wrap">
              <li :key="mv.id" class="mvs-list-item" v-for="mv in mvs" @click="toMv(mv.id)">
                <MvCard
                  :author="mv.artistName"
                  :id="mv.id"
                  :img="mv.cover"
                  :name="mv.name"
                  :playCount="$utils.formatNumber(mv.playCount)"
                />
              </li>
            </ul>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!-- 分页器 -->
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
        class="pagination"
        :current-page.sync="pageNum"
      ></el-pagination>
    </div>

    <!-- <Empty class="empty" v-show="showEmpty">暂无结果</Empty> -->
  </div>
</template>

<script>
import { reqSearch, getSongDetail, reqPlaylist } from '../../requset/api'
import PlaylistCard from '../../components/playlist/playlist'
import MvCard from '../../components/mvcard/mvcard'
export default {
  name: 'result',
  data () {
    return {
      // 总条数
      total: 0,
      // 页码
      pageNum: 1,
      pageSize: 10,
      activeIndex: 'songs',
      songs: [], // 歌曲列表
      playlists: [],
      mvs: [],
      songId: 0,
      type: 1, // 1:歌曲  1001: 歌单  1004: MV
      showEmpty: false
    }
  },
  methods: {
    // 歌曲列表
    async getSongList () {
      const res = await reqSearch({
        s: this.$route.query.q,
        type: this.type,
        limit: this.type === 1004 ? 8 : 10,
        offset: (this.pageNum - 1) * (this.type === 1004 ? 8 : 10)
      })
      console.log(res)
      if (this.type === 1) {
        this.songs = res.result.songs
        this.total = res.result.songCount
      } else if (this.type === 1000) {
        this.playlists = res.result.playlists
        this.total = res.result.playlistCount
      } else if (this.type === 1004) {
        this.mvs = res.result.mvs
        this.total = res.result.mvCount
      }
    },

    // 切换页码
    handleCurrentChange (val) {
      this.pageNum = val
      this.getSongList()
    },

    // 格式化数据
    formatter (row, column, cellValue, index) {
      return this.$utils.formatTime(cellValue)
    },

    goToMusicDetail (id) {
      this.$router.push(`/musicdetail?id=${id}`)
    }
  },
  created () {
    this.getSongList()
  },
  watch: {
    // 监听搜索重新请求数据
    $route () {
      this.getSongList()
    },

    // 监听页码值
    activeIndex () {
      switch (this.activeIndex) {
        case 'songs': // 对应tabs的name值
          this.type = 1
          this.pageNum = 1
          break;
        case 'lists': // 对应tabs的name值
          this.type = 1000
          this.pageNum = 1
          break;
        case 'mv': // 对应tabs的name值
          this.type = 1004
          this.pageNum = 1
          break;

        default:
          break;
      }
      this.getSongList()
    }
  },
  components: {
    PlaylistCard,
    MvCard
  }
}
</script>

<style lang="less">
.el-tabs__nav-wrap::after {
  background-color: var(--border) !important;
}
.el-tabs__active-bar {
  background-color: @theme-color;
}

.el-tabs__item:hover,
.el-tabs__item.is-active {
  color: @theme-color;
}
</style>
<style lang='less' scoped>
.result-container {
  .title-wrap {
    padding: 20px 32px;

    .keywords {
      display: inline-block;
      margin-right: 4px;
      font-size: 18px;
      font-weight: bolder;
    }

    .found {
      font-size: 14px;
      color: var(--font-color-grey-shallow);
      letter-spacing: 2px;
    }
  }

  /deep/.tabs-wrap {
    padding: 0 32px;

    .el-table {
      .song-table-name-cell {
        .text-ellipsis;
        display: flex;
        align-items: center;
        flex: 0 0 24px;

        .active-row {
          color: @theme-color;
        }

        .song-table-name {
          overflow: hidden;
          .text-ellipsis;
        }

        .mv-icon {
          width: 24px;
          margin-left: 4px;
        }
      }
      .title-td {
        color: var(--font-color-white);
      }
      .title-desc {
        color: #999;
        font-size: 12px;
      }
    }

    .playlist-cards {
      display: flex;
      flex-wrap: wrap;
    }

    .mvs {
      .mvs-list-wrap {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -12px;

        .mvs-list-item {
          width: 25%;
          margin-bottom: 36px;
          padding: 0 12px;
        }
      }
    }
  }

  .pagination {
    padding: 0 32px;
    display: flex;
    justify-content: flex-end;
    margin: 36px 0;
  }
}
</style>
